<template>
  <div>
    <el-dialog
      title="测试结果"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
      @close="cancel"
    >
      <div class="result_box">
        <img :src="img" alt="测试图片" class="test_img"/>
        <div class="result_info">
          <div>
            模型识别结果:
            <span> <el-tag> {{ prediction.label }}</el-tag></span>
          </div>
          <div>
            置信度:
            <el-tag> {{ prediction.confidence }}%</el-tag>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="cancel" size="small" :loading="buttonLoading">确 定</el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  filters: {},
  components: {},
  props: {
    img: {
      type: String,
      default: ''
    },
    prediction: {
      type: Object,
      default: null
    }

  },
  watch: {
    detail: {
      handler (val) {
        if (val) {
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  data () {
    return {
      dialogVisible: true,
      buttonLoading: false
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    submit () {
    },
    cancel () {
      this.dialogVisible = false
      setTimeout(() => {
        this.$emit('cancel')
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.test_img {
  width: 200px;
  text-align: center;

}

.result_box {
  display: flex;
  align-items: flex-start;

  .result_info {
    margin-left: 20px;
    display: flex;
    flex-direction: column;

    div {
      margin-bottom: 10px;
    }
  }
}
</style>
